<template>
    <div class="sales content_body">
        <div class='content_header'>
            <a-form
                layout="inline"
                :model="formState"
                @finish="handleFinish"
                @finishFailed="handleFinishFailed"
            >
                <a-form-item label="供应商名称">
                <a-input v-model:value="formState.name" placeholder="供应商名称" />
                </a-form-item>
                <a-form-item label="状态">
                    <a-select v-model:value="formState.sts" style="width: 200px" >
                    <a-select-option value="0">禁用</a-select-option>
                    <a-select-option value="1">启用</a-select-option>
                </a-select>
                </a-form-item>
                <a-form-item>
                <a-button
                    type="primary"
                    html-type="submit"
                >
                    查询
                </a-button>
                 <a-button
                    type="default"
                    style="margin-left:10px;"
                >
                    重置
                </a-button>
                </a-form-item>
            </a-form>
        </div>
        <div class='content_bottom'>
            <div class='content_btn'>
                <a-button type="primary" @click="handleAdd">新增</a-button>
            </div>
            <div class='content_table'>
                <a-table :columns="columns" :data-source="data" :loading="loading" >
                    <!-- 自定义列渲染 -->
                    <template #action="{ record }">
                        <EditOutlined @click="edit(record)" style="fontSize:24px;color:#09c4ee ;margin-right:8px;" title="编辑" />
                        <a-popconfirm
                            title="确定删除该条记录吗?"
                            ok-text="是"
                            cancel-text="否"
                            @confirm="remove(record)"
                            @cancel="cancel"
                        >
                            <DeleteOutlined style="fontSize:24px;color:#ddd ;margin-right:8px;" title="删除" />
                        </a-popconfirm>
                    </template>
                </a-table> 
            </div>
        </div>
        <a-modal 
            v-model:open="open" 
            :title='modalTitle' 
            width="360px"
            :footer="null"
        >
           <a-form
            :label-col="{ span: 7 }"
            :wrapper-col="{ span: 17 }"
            ref="addForm"
            :model="recordItem"
            autocomplete="off"
            @finish="handleFinish1"
            @finishFailed="handleFinishFailed1"
           >
            <a-form-item label="供应商名称" name="name" :rules="[{ required: true, message: '必填项' }]" >
                <a-input style="width: 200px;" min="1" v-model:value="recordItem.name" />
            </a-form-item>
            <a-form-item label="状态" name="sts" :rules="[{ required: true, message: '必填项' }]" >
                <!-- <a-input style="width: 200px;" v-model:value="recordItem.sts" /> -->
                <a-select v-model:value="recordItem.sts" style="width: 200px" >
                    <a-select-option value="0">禁用</a-select-option>
                    <a-select-option value="1">启用</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="地址" name="address" :rules="[{ required: true, message: '必填项' }]" >
                <a-input style="width: 200px;" v-model:value="recordItem.address" />
            </a-form-item>
            <a-form-item label="联系人" name="link_people" :rules="[{ required: true, message: '必填项' }]" >
                <a-input style="width: 200px;" v-model:value="recordItem.link_people" />
            </a-form-item>
            <a-form-item label="联系电话" name="link_phone" :rules="[{ required: true, message: '必填项' }]" >
                <a-input style="width: 200px;" v-model:value="recordItem.link_phone" />
            </a-form-item>

            <a-form-item style="text-align:right;width:100%;" :wrapperCol="24">
                 <a-button
                    type="default"
                    style="margin-right:10px;"
                    @click="handleCancel"
                >
                    取消
                </a-button>
                <a-button
                    type="primary"
                    html-type="submit"
                >
                    确定
                </a-button>
            </a-form-item>
           </a-form>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import '../../utils/util.scss';
import { reactive,h, ref, computed, onMounted } from 'vue';
import { UserOutlined, LockOutlined , EditOutlined , DeleteOutlined} from '@ant-design/icons-vue';
import type { UnwrapRef } from 'vue';
import { useQuery, useModify, deleteItem } from '@/api/supplier';
import type { FormProps, Button, Form, Select, FormInstance } from 'ant-design-vue';
import moment, { Moment } from 'moment';

interface FormState {
  name: string;
  sts: string;
}

interface recordItem {
    code: string,
    name: string,
    sts: string,
    address: string,
    link_people: string,
    link_phone: string
}
const formState: UnwrapRef<FormState> = reactive({
  name: '',
  sts: ''
});

const recordItem = ref<recordItem>(
    {
    code: '',
    name: '',
    sts: '',
    address: '',
    link_people: '',
    link_phone: ''
}
)

const record = ref(null);
const open = ref(false);
const modalTitle = ref('');
const loading = ref(true);
const addForm = ref<FormInstance>();

const columns = [
    {
        title: '供应商名称',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '供应商编号',
        dataIndex: 'code',
        key: 'code',
    },
    {
        title: '状态',
        dataIndex: 'sts',
        key: 'sts',
    },
    {
        title: '地址',
        dataIndex: 'address',
        key: 'address',
    },
    {
        title: '联系人',
        dataIndex: 'link_people',
        key: 'link_people',
    },
    {
        title: '联系电话',
        dataIndex: 'line_phone',
        key: 'line_phone',
    },
    {
        title: '操作',
        key: 'action',
        slots: { customRender: 'action' }
    }
];
const data = ref<recordItem[]>([]);
const handleFinish: FormProps['onFinish'] = values => {
    loading.value = true;
    useQuery(formState).then((res: any) => {
        if (res?.code == 200) {
            loading.value = false;
            data.value = res.data;
        } else {

        }
    })
};
const handleFinishFailed: FormProps['onFinishFailed'] = errors => {
  console.log(errors);
};
const handleFinish1: FormProps['onFinish'] = values => {
  console.log(values, recordItem);
  useModify(values).then(res => {
    console.log(res)
  })
};
const handleFinishFailed1: FormProps['onFinishFailed'] = errors => {
  console.log(errors);
};

const edit = (record: any) => {
    modalTitle.value = '编辑供应商'
    recordItem.value = {...record};
    open.value = true;
}
const remove = (record:any) => {
    const code = record.code;
    deleteItem(code).then(res => {
        console.log(res)
    })
}

const handleAdd = () => {
    open.value = true;
    addForm.value?.resetFields();
    modalTitle.value = '新增供应商'
}

const handleCancel = () => {
    addForm.value?.resetFields();
    open.value = false;
}

onMounted(() => {
    loading.value = true;
    handleFinish({...formState})
})

</script>